<!--
 * @Author: your name
 * @Date: 2022-01-03 16:26:25
 * @LastEditTime: 2022-01-09 10:56:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue\vue-douban-pc\src\views\Information.vue
-->
<template>
    <div class="info-box">
        <el-row>
            <el-col :span="20" :offset="4">
                <div class="info-content">
                    <el-card class="box-card" :body-style="{ padding: '30px', height: '400px' }">
                        <div slot="header" class="clearfix">
                            <span>User information</span>
                        </div>
                        <div
                            class="text item"
                            style="margin-bottom: 20px;"
                        >用户名: {{this.information.username}}</div>
                        <div
                            class="text item"
                            style="margin-bottom: 20px;"
                        >手机号: {{information.phone}}</div>
                        <div
                            class="text item"
                            style="margin-bottom: 20px;"
                        >邮箱号: {{information.email}}</div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getUserInfo } from "../utils/auth";
export default {
    name: 'VueInformation',

    data() {
        return {
            userId: "",
            information: [],
        };
    },

    mounted() {

    },
    created() {
        
        this.userId = getUserInfo().users.user_id;
        this.getInformation();
    },
    methods: {
        getInformation(){
            this.axios.get("/getInformation",{
                params: {
                   id: this.userId,
                }
            }).then((res) =>{
                this.information = res.data[0]
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.info-box {
    position: relative;
    .info-content {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both;
        }

        .box-card {
            width: 480px;
        }
    }
}
</style>